.root {
  container-type: inline-size;
}

.columns {
  display: flex;

  @container (max-width: 620px) {
    flex-direction: column;
  }
}

.controls {
  flex: 0 0 250px;
  border-inline-start: 1px solid var(--demo-border);
  padding: 4px;
  padding-bottom: var(--mantine-spacing-xs);

  @container (max-width: 620px) {
    flex: unset;
    border-left: none;
    border-right: none !important;
    border-top: 1px solid var(--demo-border);
  }
}

.header {
  padding-top: calc(var(--mantine-spacing-md) - 4px);
  margin-left: -4px;
  margin-right: -4px;
  border-bottom: 1px solid var(--demo-border);
  padding-left: var(--mantine-spacing-md);
  padding-right: var(--mantine-spacing-md);
  padding-bottom: var(--mantine-spacing-xs);
  margin-bottom: var(--mantine-spacing-xs);
}
